<template>
    <div>
        <table>
            <tr>
                <td>登录名</td>
                <td><input readonly type="text" v-model="data.name"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input readonly type="password" v-model="data.pwd"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input readonly type="text" v-model="data.age"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input disabled type="radio" v-model="data.sex" name="" value="男" checked>男
                    <input disabled type="radio" v-model="data.sex" name="" value="女">女
                </td>
            </tr>
            <tr>
                <td>图片</td>
                <td>
                    <input readonly type="file" @change="tent">
                    <img :src="'https://localhost:7087'+data.img" alt="" style="width: 80px;height: 80px;">
                </td>
            </tr>
            <tr>
                <a href='/ShowView'>返回</a>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref  ,onMounted} from 'vue';
import axios from 'axios';
import { useRouter ,useRoute} from 'vue-router';

const rountr=useRouter();
const rount=useRoute();

onMounted(() => {
    Xin()
})

const tent=(e:any)=>{
    var f=e.target.files[0];
    var fd=new FormData();
    fd.append('file',f);
    axios.post("https://localhost:7087/api/UpLog",fd).then(res=>{
        data.value.img=res.data;
    })
}

const data=ref({
  "id": 0,
  "name": "",
  "pwd": "",
  "age": 0,
  "sex": "",
  "img": ""
})

const Xin=()=>{
    var vid=rount.query.id;
    axios.get("https://localhost:7087/api/User/GetUser",{params:{id:vid}}).then(res=>{
        data.value=res.data;
    })
}


</script>

<style scoped>

</style>